<script setup lang="ts">
import TheWelcome from '../components/TheWelcome.vue'
</script>

<template>
  <main class="main-background">
    <h1>Hi, youtal</h1>
  </main>
</template>

<style>
.main-background{
  background-image: url(../assets/hb3.jpg);
  background-size: cover;
    /* 使背景图片覆盖整个容器 */
  background-position: center;
    /* 使背景图片居中 */
  background-repeat: no-repeat;
    /* 防止背景图片重复 */
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

h1{
  color: white;
  font-size: 10rem;
  margin-top: 33.33vh;
  transform: translateY(-50%);
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
</style>